<template>
  <div>
    <div class="blog_info_wrap">
      <el-card>
        <el-empty v-if="articleByTags.length <= 0"></el-empty>
        <div v-if="articleByTags.length >= 0">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item,index) in articleByTags" :key="index">
              <el-card class="card" :body-style="{ padding: '0px' }">
                <div style="overflow:hidden">
                  <el-image @click="routerArticleByTitle(item.articleTitle,item.articleUsername,item.articleId)"
                            style="width: 100%;height: 200px;cursor:pointer;" :fit="'fill'" :src="item.articleCover"
                            class="image"></el-image>
                </div>
                <div style="padding: 14px;">
                  <h3 style="cursor:pointer">{{ item.articleTitle }}</h3>
                  <div class="bottom clearfix">
                    <time class="time">{{ item.createTime }}</time>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {getBlogInfoByTags} from "../../request/homeRequest";

export default {
  name: "BlogListByTags",

  data() {
    return {
      articleByTags: [],
    }
  },

  methods: {
    /**
     * 按照标签名获取文章信息
     */
    getBlogInfoByTags(tagName) {
      this.$homeReq.getBlogInfoByTags(tagName).then(data => {

        this.articleByTags = data.data
      })
    },
    routerArticleByTitle(articleTitle, articleUsername, articleId) {
      this.$router.push({
        path: `/blogInfoById/${articleId}`,
      })
    }


  },

  created() {
    // todo 按照标签查找文章 {tagsName: 'html'}
    this.getBlogInfoByTags(this.$route.params.tagsName);
  }

}
</script>

<style scoped>

.time {
  font-size: 13px;
  color: #999;
}


.blog_info_wrap {
  width: 80%;
  margin: auto;
  margin-top: 55px;

}

h3:hover {
  color: #0F9E5E;
}


.card {
  height: 300px;
}
</style>
